<template>
  <div class="addrList">
    <div class="receiveInfo" v-for="(item,index) in addrList" :key="index" @click.stop="selectedAddr(item)">
      <div>
        <div>
          <span class="receivePeople">收货人：{{ item.nickname }}</span>
        </div>
        <span class="receiveTel">联系电话：{{ item.tel }}</span>
      </div>
      <p>收货地址：{{ item.province + item.city + item.area + item.address }}</p>
      <div class="handle">
        <div class="defaultAddr" @click.stop="setDefault(item.id)">
          <span class="iconfont icon-dagou_wuquan" :class="{isdefault: item.is_default == 1}"></span>
          <span>默认地址</span>
        </div>
        <div class="btns">
          <span class="update" @click.stop="updateAddrInfo(item)">编辑</span>
          <span class="delate" @click.stop="delUserAddr(item.id)">删除</span>
        </div>
      </div>
    </div>
    <div class="addAddr">
      <mt-button size="large" type="danger" @click="addAddr">添加收货地址</mt-button>
    </div>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import { getAddrList, delAddr, setDefaultAddr } from "@/api/index";
export default {
  data() {
    return {
      addrList: [],
      loadShow: true
    };
  },
  created() {
    getAddrList().then(result => {
      this.addrList = result.data;
      this.loadShow = false;
    });
    this.$store.commit("SETPAGEINFO", {
      title: "收货地址列表",
      description: ""
    });
  },
  methods: {
    addAddr() {
      this.$router.push({
        name: "添加收货地址",
        params: this.$route.params
      });
    },
    delUserAddr(id) {
      this.$messagebox.confirm("确定删除此收货地址?").then(action => {
        if (action == "confirm") {
          delAddr(id).then(results => {
            if (results.data.success == "yes") {
              this.$toast({
                message: "删除成功",
                iconClass: "iconfont icon-dagou_wuquan"
              });
            }
            getAddrList().then(result => {
              this.addrList = result.data;
            });
          });
        }
      });
    },
    updateAddrInfo(oldInfo) {
      this.$router.push({
        name: "添加收货地址",
        params: {
          oldInfo
        }
      });
    },
    setDefault(id) {
      setDefaultAddr(id).then(() => {
        getAddrList().then(result => {
          this.addrList = result.data;
        });
      });
    },
    selectedAddr(selectedAddrInfo) {
      var selectInfo = this.$route.params;
      selectInfo.selectedAddr = selectedAddrInfo;
      if (this.$route.params.type) {
        this.$router.push({
          name: "确认领取",
          params: this.$route.params
        });
      } else {
        this.$router.push({
          name: "确认订单",
          params: this.$route.params
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.addrList {
  width: 100%;
  height: 100%;
  padding-bottom: to(95);
  .receiveInfo {
    // height: to(88);
    background-color: #fff;
    padding: to(15);
    margin-bottom: to(15);
    div:nth-child(1) {
      display: -webkit-flex;
      span {
        font-size: to(25);
        line-height: to(35);
        // vertical-align: top;
      }
      div {
        flex: 1;
        .receivePeople {
          color: #000;
        }
      }
      .receiveTel {
        color: #5b5b5b;
        flex: 1;
        text-align: right;
        font-size: to(21);
      }
    }
    p {
      font-size: to(21);
      color: #5b5b5b;
      line-height: to(50);
      margin: 0;
    }
    .handle {
      display: flex;
      display: -webkit-flex;
      .defaultAddr {
        flex: 8;
        .iconfont {
          width: to(31);
          height: to(31);
          display: inline-block;
          border-radius: 50%;
          color: white;
          text-align: center;
          margin-right: to(15);
          // border: to(1) solid #ccc;
          position: relative;

          &::before {
            position: absolute;
            top: -55%;
            left: -55%;
            width: 200%;
            height: 200%;
            border: to(2) solid #ccc;
            border-radius: 50%;
            transform: scale(0.5);
            // box-sizing: border-box;
            font-size: to(42);
            line-height: to(62);
            font-weight: bolder;
          }
        }
        .isdefault {
          &::before {
            background-color: #a50000;
            border: 0;
          }
        }
      }
      .btns {
        flex: 2;
        font-size: to(21);
        color: #c5c5c5;
        text-align: right;
        display: flex;
        display: -webkit-flex;
        span {
          flex: 1;
          text-align: center;
          height: to(22);
          margin-top: to(10);
          line-height: to(25);
          padding: 0 to(5);
          &:nth-child(1) {
            border-right: 1px solid #ccc;
          }
        }
      }
    }
  }
  .addAddr {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: to(20);
  }
}
</style>
